<script setup lang="ts">
  // 导入列表组件
  import { ref } from 'vue';
  import OrderList from './components/OrderList.vue'
  // tabs 数据
  const orderTabs = ref([
    { orderState: 0, title: '全部' },
    { orderState: 1, title: '待付款' },
    { orderState: 2, title: '待发货' },
    { orderState: 3, title: '待收货' },
    { orderState: 4, title: '待评价' },
  ])

  // 获取页面参数
  const query = defineProps<{
    type : string
  }>()

  // 高亮下标
  const activeIndex = ref(orderTabs.value.findIndex((v) => v.orderState === Number(query.type)))
</script>

<template>
  <!-- 滑动容器 -->
  <swiper class="swiper" :current="activeIndex" @change="activeIndex = $event.detail.current">
    <!-- 滑动项 -->
    <swiper-item v-for="item in orderTabs" :key="item.title">
      <!-- 订单列表 -->
      <OrderList :order-state="item.orderState" />
    </swiper-item>
  </swiper>
</template>
